<template>
	<div class="app-container">
		<el-tabs v-model="activeName">
			<el-tab-pane label="use clipboard  directly" name="directly">
				<el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
				<el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData,$event)">
					copy
				</el-button>
			</el-tab-pane>
			<el-tab-pane label="use clipboard by v-directive" name="v-directive">
				<el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
				<el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">
					copy
				</el-button>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import * as clip from "/vue/utils/clipboard.js";
    import * as clipboard from "/vue/directive/clipboard/index.js";
	module.exports = {
		name: 'ClipboardDemo',
		directives: {
			clipboard
		},
		data() {
			return {
				activeName: 'directly',
				inputData: 'https://github.com/PanJiaChen/vue-element-admin'
			}
		},
		methods: {
			handleCopy(text, event) {
				clip(text, event)
			},
			clipboardSuccess() {
				this.$message({
					message: 'Copy successfully',
					type: 'success',
					duration: 1500
				})
			}
		}
	}
</script>

